<template>
  <div class="play-list">
    <div class="header">
      <div class="inner">
        <div style="font-size: 15px; font-weight: bold">播放队列</div>
        <svg-icon icon-name="shanchu" class="shanchu" @click="clearList"></svg-icon>
      </div>
    </div>
    <div class="scroll" v-if="!isAllDelete && handleList.length">
      <template v-for="(item, index) in handleList" :key="index">
        <transition name="router_animate">
          <div
            v-if="!item.isDelete"
            class="play-item"
            @mouseenter="handleMouseenter(item)"
            @mouseleave="handleMouseleave(item)"
          >
            <!-- 遮罩用于音乐小球 -->
            <div class="mask">
              <!-- 音乐小球 -->
              <x-music-ball @click="$emit('itemClick', item.id)"></x-music-ball>
            </div>
            <!-- 歌名 -->
            <div class="name">{{ item.name }}</div>
            <!-- 右侧 -->
            <div class="right">
              <!-- 歌手 -->
              <div class="songer">{{ item.singer }}</div>
              <!-- 时长 -->
              <div v-if="item.showMore" class="duration">暂无</div>
              <!-- 每个删除按钮 -->
              <svg-icon v-else icon-name="shanchu" class="shanchu" @click.stop="removeByNo(item)"></svg-icon>
            </div>
          </div>
        </transition>
      </template>
    </div>
    <lay-empty
      v-if="isAllDelete || !handleList.length"
      description="列表空空如也"
      style="color: #ccc"
    ></lay-empty>
  </div>
</template>

<script>
import { computed, onMounted, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [
          {
            id: 1,
            name: '大田后生仔',
            url: './assets/杨辰 - 大田后生仔 (DJ版).mp3',
            cover: 'ChenYou',
            singer: '杨辰'
          }
        ]
      }
    }
  },
  setup(props) {
    const store = useStore()
    const _data = reactive({
      handleList: [],
      outIndex: null // 用来确定离场动画
    })

    onMounted(() => {
      _data.handleList = props.list.map(item => {
        return {
          ...item,
          showMore: true,
          isDelete: false,
        }
      })
    })

    const isAllDelete = computed(() => {
      return _data.handleList.every(item => item.isDelete)
    })

    // 鼠标进入
    function handleMouseenter(item) {
      item.showMore = false
    }
    // 鼠标离开
    function handleMouseleave(item) {
      item.showMore = true
    }
    function clearList() {
      _data.handleList.forEach(item=>{
        item.isDelete=true
      })
      store.commit('playList/CLEAR_PLAYLIST')
    }
    function removeByNo(item) {
      item.isDelete = true
      store.commit('playList/REMOVE_PLAYLIST', item.id)
    }
    return {
      ...toRefs(_data),
      clearList,
      removeByNo,
      handleMouseenter,
      handleMouseleave,
      isAllDelete,
    }
  }
}
</script>

<style lang="scss" scoped>
// 删除动画
.router_animate-leave-active {
  animation: fadeOutLeft 0.6s;
}

.shanchu {
  color: #ccc;
  &:hover {
    cursor: pointer;
    color: $bar;
  }
}
.play-list {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .header {
    padding: 0 10px;
    .inner {
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 2px solid #f5f5f5;
    }
  }
  .scroll {
    flex: 1;
    overflow: auto;
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background-color: #e3e3e3;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      background: transparent;
      border-radius: 10px;
    }
    .play-item {
      position: relative;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      .mask {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 50px;
        z-index: 10;
      }
      .right {
        display: flex;
        justify-content: space-between;
        width: 40%;
        .duration {
          color: #8d8d8d;
        }
      }
      &:hover {
        background-color: #f3f3f3;
      }
    }
  }
}
</style>
